<template>
  <div class="echarts">
    <div id="piechart" style="width: 800px; height: 300px"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
    name:"Piechart",
    data() {
        return {
            datalist:[],
        }
    },
    props:{
      datar:{type:Array}
    },
    watch: {
      datar: function (val) {
        if (val.length > 0) {
          this.datalist= []
          this.Mycharts()
        }
      },
    },
    methods: {
        getItem(array,arr){
            array.forEach(element => {
                arr.push({name:element.name,value:element.stock})
            });
            // console.log("_______________________________",arr);
            return arr
        },
        Mycharts(){
            var mychart = echarts.init(document.getElementById("piechart"));
            //配置图表
            var option = {
                toolbox:{
                    show: true,
                    itemSize:20,
                    // itemGap:15,  //设置主副标题之间的距离
                    feature:{
                        saveAsImage:{},
                    },
                },
                title:{
                    text:"库存占比图"
                },
                tooltip:{},
                grid:{
                    x:10,
                    y:10,
                },
                legend:{
                    orient:"vertical",
                    type:"scroll",
                    right:"right",
                    top:"10%",
                    height:"200",
                    width:"300",
                    textStyle:{
                        fontSize:20,
                    }
                },
                series:[
                    {
                        name:"库存量",
                        type:"pie",
                        data:this.datalist,
                        radius:"60%",
                        emphasis:{
                            itemStyle:{
                                ShadowBlur:10,
                                ShadowOffsetX:0,
                                shadowColor:"rgba(0,0,0,0.5)",
                            },
                        },
                    },
                ],
            };
            this.getItem(this.datar,this.datalist)
            mychart.setOption(option);
        },
    },
    mounted() {
        this.Mycharts();
       
        
    },
}
</script>

<style>

</style>